<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ss4u="http://java.sun.com/jsf/composite/ss4u"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<style type="text/css">
.ui-widget-content {
	padding: 0px !important;
}

.colunaSaldoConta {
	text-align: right;
	width: 50px;
}

.divProgresso {
	
}
</style>

	<script language="javascript">
		
	</script>

</h:head>
<h:form id="formOrcamento" prependId="false">

	<p:commandButton value="acaoStr" action="#{manterOrcamentoMB.acaoStr}" />
	<p:commandButton value="acao" action="#{manterOrcamentoMB.acao}" />

	<p:panel closable="false" id="panelOrcamento" style="height:200px;">

		<f:facet name="header">

			<table style="width: 100%" cellpadding="0" cellspacing="0" border="0">

				<tr>
					<td>Orçamentos</td>
					<td align="right"><p:commandLink
							oncomplete="dlgOrcamento.show();" process="@this"
							update=":formAddOrcamento"
							action="#{manterOrcamentoMB.doAdicionarAction}">
							<h:graphicImage url="/imgs/add.png"></h:graphicImage>
						</p:commandLink></td>
				</tr>
			</table>
		</f:facet>

		<table cellpadding="0" cellspacing="0" border="0" style="width: 100%">
			<ui:repeat var="orcamento"
				value="#{manterOrcamentoMB.listaOrcamentos}">
				<tr>
					<td><h:outputText value="#{orcamento.categoriaTransacao.nome}" />
						<br />
						<div class="divProgresso">
							<ss4u:barraProgresso valor="#{orcamento.percentUsado}"  />
						</div></td>

					<td class="colunaSaldoConta"><h:outputText
							value="#{orcamento.valor}">
							<f:convertNumber type="currency" currencySymbol="" />
						</h:outputText></td>
				</tr>

			</ui:repeat>
		</table>
	</p:panel>

</h:form>
<p:dialog header="Criar orçamento" widgetVar="dlgOrcamento" modal="true"
	appendToBody="true">
	<h:form id="formAddOrcamento">
		<table style="width: 300px">
			<tr>
				<td>Categoria:</td>
				<td colspan="3"><h:selectOneMenu id="cboCateg"
						converter="selectOneConverter" styleClass="cboCateg"
						value="#{manterOrcamentoMB.entidade.categoriaTransacao}"
						itens="#{manterOrcamentoMB.listaCategorias}">
						<f:selectItems value="#{manterOrcamentoMB.listaCategorias}"
							var="categoria" itemLabel="#{categoria.nome}"
							itemValue="#{categoria}" />
					</h:selectOneMenu></td>
			</tr>


			<tr>
				<td>Valor:</td>
				<td align="right"><p:inputText style="width:70px;"
						value="#{manterOrcamentoMB.entidade.valor}">
						<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
					</p:inputText></td>
			</tr>

			<tr>
				<td colspan="4">
					
					<p:calendar locale="pt"
						value="#{manterOrcamentoMB.entidade.dataInicial}"
						pattern="dd/MM/yyyy" size="10" showOn="button" navigator="true" />
					<h:outputText value=" até " />
					<p:calendar locale="pt"
						value="#{manterOrcamentoMB.entidade.dataFinal}"
						pattern="dd/MM/yyyy" size="10" showOn="button" navigator="true" />
				</td>
			</tr>
			
			<tr>
				<td colspan="4"><p:separator
						style="margin-top:10px; margin-bottom:5px;" height="2" /></td>
			</tr>
			<tr>
				<td><p:commandButton value="Cancelar" type="button"
						onclick="dlgOrcamento.hide();" /></td>
				<td colspan="3" align="right"><p:commandButton
						oncomplete="dlgOrcamento.hide();" value="Salvar"
						process="formAddOrcamento" update="@(form:formOrcamento)"
						action="#{manterOrcamentoMB.doSalvarAction}"></p:commandButton></td>
			</tr>
		</table>
	</h:form>
</p:dialog>

</html>